<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.渐变</title>
    <style>
        body>* {
            margin-left: 40px;
        }li{
             margin-bottom:  0.5em;
         }
        canvas{
            display: inline-block;
            vertical-align: top;
        }
        ol{
            display: block;
        }
    </style>
</head>
<body>
<!--<h4><a href="http://caibaojian.com/canvas/6.html">线条属性</a></h4>-->
<div>
    <canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
</div>
<ol>
    <li>createLinearGradient(sx,sy,ex,ey) 创建线性渐变：开始坐标、结束坐标</li>

    <li>addColorStop(s,c) 添加渐变节点：节点值0-1、颜色</li>
    <li>fillRect(sx,sy,w,h)、strokeRect(sx,sy,w,h) 绘制矩形：坐标、宽高</li>

    <li>createRadialGradient(nx,ny,nr,wx,wy,wr) 径向渐变：内圈坐标、半径、外圈坐标、半径</li>
</ol>
<p>tip：渐变设置相对于坐标的，如填充区域大于渐变过渡，外围则为外围颜色填充。 小于渐变区域则只能看到渐变中间部分（类似遮罩）。</p>
<!--<h5>实例：</h5>-->
<!--<canvas id="canimg"></canvas>-->
<script>
    window.onload = function () {
        var can= document.getElementById('canvas');
        can.width=400;
        can.height=800;
        can.style.background='#ddd';
        var can2d = can.getContext('2d');

        can2d.beginPath();
        can2d.moveTo(20,20);
        can2d.lineTo(20,100);
        can2d.lineTo(380,100);
        can2d.lineTo(380,20);
        // can2d.closePath();
        can2d.strokeStyle='red';
        can2d.lineWidth=15;
        can2d.fillStyle='orange';
        can2d.lineCap='round';
        can2d.lineJoin='bevel';
        can2d.fill();
        can2d.stroke();


        //创建线性渐变
        var grad= can2d.createLinearGradient(0,0,400,0); //开始坐标，结束坐标
        grad.addColorStop(0, 'green');  //颜色节点
        grad.addColorStop(0.5, 'blue');
        grad.addColorStop(1, 'orange');

        can2d.fillStyle=grad;  //设置渐变色
        can2d.strokeStyle=grad;
        can2d.fill();   //绘制
        // can2d.stroke();

        // can2d.fillStyle='yellow';
        can2d.fillRect(30,300,150,50); //快捷创建矩形
        can2d.fillRect(210,300,150,50); //快捷创建矩形

        can2d.strokeRect(30,200,150,50); //快捷创建线框矩形
        can2d.strokeRect(210,200,150,50); //快捷创建线框矩形


        // 创建径向渐变
        var grar = can2d.createRadialGradient(200,600,0,200,600,200); //（圆环）内圈圆坐标，中间半径，外圈圆坐标，外圈半径
        grar.addColorStop(0, 'blue');  //颜色节点
        grar.addColorStop(0.5, 'yellow');
        grar.addColorStop(1, 'red');

        can2d.fillStyle=grar;
        can2d.fillRect(100,500,300,200);

    }
</script>
</body>
</html>